import React, { useEffect, useState } from 'react'
import { Card, Descriptions, Typography, message, Progress } from 'antd';
import styles from './style.less'
import { changeStudentInfo, changeTeacherInfo, getStudentScore } from '../service'
import qs from 'qs'

const Center: React.FC = () => {

    const info: any = localStorage.getItem('info')
    const showInfo = JSON.parse(info)
    const studentId = showInfo.studentId;
    const type = localStorage.getItem('userType')
    const isStudent = (type === '2')

    const [name, setName] = useState(isStudent ? showInfo.studentName : showInfo.teacherName);
    const [score, setScore] = useState('')

    const handleChange = async (e: any) => {
        const studentObj = { studentName: e }
        const teacherObj = { teacherName: e }
        setName(e)
        let res;
        if (isStudent) {
            res = await changeStudentInfo(studentObj)
        } else {
            res = await changeTeacherInfo(qs.stringify(teacherObj))
        }
        if (res.code === 200) {
            message.success('修改成功')
            if (isStudent) {
                const info = JSON.stringify({ ...showInfo, studentName: e })
                localStorage.setItem('user', res?.data?.studentName)
                localStorage.setItem('info', info)
            } else {
                const info = JSON.stringify({ ...showInfo, teacherName: e })
                localStorage.setItem('user', res?.data?.teacherName)
                localStorage.setItem('info', info)
            }
            location.reload()
        }
    }

    const getScore = async () => {
        const res = await getStudentScore(studentId)
        // console.log(res, 'resresresooooo');
        // setScore(res.data)// 这个地方和后端确认下分数
    }

    useEffect(() => {
        getScore()
    }, [])

    return (
        <>
            <div className={styles.firstCard}>
                <Card>
                    {(isStudent && showInfo.sex === 1) ? <img src={require('../../../images/boy.svg')} className={styles.icon} /> : ''}
                    {(isStudent && showInfo.sex === 0) ? <img src={require('../../../images/girl.svg')} className={styles.icon} /> : ''}
                    {(!isStudent && showInfo.sex === 1) ? <img src={require('../../../images/man.svg')} className={styles.icon} /> : ''}
                    {(!isStudent && showInfo.sex === 0) ? <img src={require('../../../images/woman.svg')} className={styles.icon} /> : ''}
                    <Typography.Title editable={{
                        onChange: handleChange
                    }} level={3} style={{ margin: 0 }}>
                        {name}
                    </Typography.Title>
                    {/* {isStudent && <Progress type="circle" percent={parseInt(score)} width={70} format={percent => `${percent} 分`} className={styles.score} />} */}
                </Card>
            </div>
            <Card className={styles.infoCard} title="用户信息">
                <Descriptions layout="vertical" size={'middle'} bordered>
                    <Descriptions.Item label="年龄">{`${showInfo.age}岁`}</Descriptions.Item>
                    <Descriptions.Item label="性别">{showInfo.sex === 0 ? '女' : '男'}</Descriptions.Item>
                    <Descriptions.Item label={isStudent ? '学号' : '工号'}>{isStudent ? showInfo.studentCode : showInfo.teacherCode}</Descriptions.Item>
                    {isStudent ? <Descriptions.Item label="年级">{`${showInfo.year}级`}</Descriptions.Item> : ''}
                    {isStudent ? <Descriptions.Item label="班级">{showInfo.specialty}</Descriptions.Item> : ''}
                    {isStudent ? '' : <Descriptions.Item label="简介">{showInfo.teacherContent}</Descriptions.Item>}
                    <Descriptions.Item label="email">{showInfo.email}</Descriptions.Item>
                </Descriptions>
            </Card>
        </>
    );
}

export default Center;
